<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 拿到项目的根路径  放入到域对象中 。 -->
<c:set var="root" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>分类列表</title>
<link rel="stylesheet" href="${root}/css/bootstrap.min.css"
	type="text/css" />
<script src="${root}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${root}/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="${root}/css/style.css" type="text/css" />

<style>
body {
	margin-top: 20px;
	margin: 0 auto;
	width: 100%;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}
</style>
<script>
	$(function(){
		//alert("hello");
		var content="";
		$.post("${root}/ProductServlet?state=history",
				function(data){
					//alert("hello");
					for(var i = 0 ;i<data.length;i++){
						//alert(data[i].pid);
						if(i<7)
						content+="<li style='width:150px;height=216px;float:left;margin: 0 8px 0 0; padding: 0 18px 15px; text-align: center;'><a href='${root }/ProductServlet?state=infomation&pid="+data[i].pid+"'><img src='${root}/"+data[i].pimage+"' width='130px' height='130px'/></a><li/>";
					}
					$("#historyul").html(content);
				},
				"json"
			);
		});


</script>

</head>

<body>


	<!-- 引入header.jsp -->
	<jsp:include page="/header.jsp"></jsp:include>


	<div class="row" style="width: 1210px; margin: 0 auto;">
		<div class="col-md-12">
			<ol class="breadcrumb">
				<li><a href="${root }/IndexServlet?state=index">首页</a></li>
			</ol>
		</div>
		<c:forEach items="${pageBean.data}" var="pro">
			<div class="col-md-2" style="height: 230px">
				<a href="${root }/ProductServlet?state=infomation&pid=${pro.pid}&currentPageNumber=${currentPageNumber}&cid=${pageBean.cid}"> <img src="${root}/${pro.pimage}"
					width="170" height="170" style="display: inline-block;">
				</a>
				<p>
					<a
						href="${root }/ProductServlet?state=infomation&pid=${pro.pid}&currentPageNumber=${currentPageNumber}&cid=${pageBean.cid}"
						style='color: green'>${pro.pname}</a>
				</p>
				<p>
					<font color="#FF0000">商城价：&yen;${pro.shop_price}</font>
				</p>
			</div>
		</c:forEach>
	</div>

	<!--分页 -->
	<div style="width: 380px; margin: 0 auto; margin-top: 50px;">
		<ul class="pagination" style="text-align: center; margin-top: 10px;">
			<li>
			<!-- 首页 -->
			<a href="${root}/ProductServlet?state=pageCategory&currentPageNumber=1&cid=${pageBean.cid}"
				aria-label="Previous"><span aria-hidden="true">首页</span></a></li>
			<!-- <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li> -->
			<!-- start=1 end=5 -->
			<!-- 上一页 若当前页为第一页则禁用此按钮-->
			<c:if test="${pageBean.currentPageNumber==1}">
				<li class="disabled"><a href="javascript:void(0)"
					aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
			</c:if>
			<c:if test="${pageBean.currentPageNumber!=1}">
				<li><a
					href="${root}/ProductServlet?state=pageCategory&currentPageNumber=${pageBean.currentPageNumber-1}&cid=${pageBean.cid}"
					aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
			</c:if>
			<!-- 中间显示的页码 -->	
			<c:forEach begin="${pageBean.start}" end="${pageBean.end}" step="1"
				var="i">
				<li
					<c:if test="${pageBean.currentPageNumber==i}">class="active"</c:if>><a
					href="${root}/ProductServlet?state=pageCategory&currentPageNumber=${i}&cid=${pageBean.cid}">${i}</a></li>
			</c:forEach>
			<!-- 下一页 若当前页为最后一页则禁用此按钮-->
			<c:if test="${pageBean.currentPageNumber==pageBean.totalPage}">
				<li class="disabled"><a href="javascript:void(0)" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
			</c:if>
			<c:if test="${pageBean.currentPageNumber!=pageBean.totalPage}">
				<li><a href="${root}/ProductServlet?state=pageCategory&currentPageNumber=${pageBean.currentPageNumber+1}&cid=${pageBean.cid}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
			</c:if>
			<li>
			<!-- 尾页 -->
			<a href="${root}/ProductServlet?state=pageCategory&currentPageNumber=${pageBean.totalPage}&cid=${pageBean.cid}" aria-label="Next"><span aria-hidden="true">尾页</span></a></li>
		</ul>
	</div>
	<!-- 分页结束 -->

	<!--商品浏览记录-->
	<div
		style="width: 1210px; margin: 0 auto; padding: 0 9px; border: 1px solid #ddd; border-top: 2px solid #999; height: 246px;">

		<h4 style="width: 50%; float: left; font: 14px/30px 微软雅黑">浏览记录</h4>
		<div style="width: 50%; float: right; text-align: right;">
			<a href="javascript:void(0)">more</a>
		</div>
		<div style="clear: both;"></div>

		<div style="overflow: hidden;">

			<ul style="list-style: none;overflow: hidden;" id="historyul">
				<!-- 历史记录显示处 -->
			</ul>

		</div>
	</div>



	<!-- 引入footer.jsp -->
	<jsp:include page="/footer.jsp"></jsp:include>

</body>

</html>